
<!DOCTYPE html>
<html>
<head>
<title>数据字典管理</title>
<link rel="stylesheet" th:href="@{/}+'layuiadmin/style/admin.css'" media="all">
<link rel="stylesheet" href="js/zTree/css/zTreeStyle/zTreeStyle.css" media="all">
<script type="text/javascript" src="js/zTree/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">  
    <div class="layui-card-body">
      <div class="layui-row">
    <div class="layui-col-md2">
       <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="layui-col-md10">
      <div>
        <div class="layui-inline">
          <input type="text" id="name" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
          <input type="text" id="code" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-btn-group">
          <button type="button" class="layui-btn layui-btn-primary" id="queryBtn" data-type="queryBtn">查询</button>
          <button type="button" class="layui-btn" data-type="add">增加</button>
          <button type="button" class="layui-btn" data-type="batchDel">删除</button>
          <button type="button" class="layui-btn" data-type="move">移动</button>
          <button type="button" class="layui-btn" data-type="refreshAll">刷新</button>
          <button type="button" class="layui-btn" id="upload">上传</button>
        </div>
      </div>

      <table id="dict-table" lay-filter="dict-table"></table>
    </div>
  </div>
    </div>
  </div>
</div>

<script th:inline="none">

layui.use(['table', 'tree','upload'], function(){
  var upload = layui.upload
  ,table = layui.table;

  var treeSetting = {
		async: {
			enable: true,
			url: "dict/getDictTree",
			autoParam:["id=pid"]
		},
		view:{
			showTitle: true,
			selectedMulti : false
		},callback:{
			onClick: function(event,treeId,node){
               $("#name").val("");
               $("#code").val("");
              var whr = {parentId:node.id,name:$("#name").val(),code:$("#code").val()};
				table.reload('dict-table',{
					loading:true,
					where: whr
					,page: {
						 curr: 1 //重新从第 1 页开始
					}
				});				
			}
		}
	};
	$.fn.zTree.init($("#treeDemo"), treeSetting);
	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    
  function refreshNode(){
	  var selectedNodes = treeObj.getSelectedNodes();
	  if( selectedNodes.length==0){
		  treeObj.reAsyncChildNodes(null, "refresh");
	  }else{
		  $.ajax({
			  url: "dict/getChildCount",
			  type:'POST',
			  dataType:'JSON',
			  data:{id: selectedNodes[0].id},
			  success:function(ret){
				  selectedNodes[0].isParent = (ret.count > 0) ;
				  treeObj.reAsyncChildNodes(selectedNodes[0], "refresh");
			  }
		  })
		  
	  }
  }
  window.refreshNode = refreshNode;
  table.render({
	    elem: '#dict-table'
	    ,url: 'dict/getList' 
	    ,cols: [[
	      {type: 'checkbox'}
	      ,{field: 'id', width: 100, title: 'ID'}
	      ,{field: 'parentId', title: '父ID',hide:true}
	      ,{field: 'name', title: '字典名称',edit:'text', width: 200}
	      ,{field: 'code', title: '编码',edit:'text', width: 200}
	      ,{field: 'orderno', title: '排序',edit:'text', width: 100}
	    ]]
	    ,page: true
	    ,limit: 30
	    ,height: top.height - 100
	    ,text: '对不起，加载出现异常！'
	    ,done:function(){
	          enableRowClick(table,form,'dict-table',"dict-table");
	     }
	  });
	  window.reloadTable = function(){
		  table.reload('dict-table'); 
	  }
	  table.on("edit(dict-table)",function(obj){
		 $.ajax({
			 url: 'dict/modify',
			 type:'POST',
			 data:obj.data,
			 dataType:'json',
			 success:function(ret){
				 
				 
			 }
		 })
	  })
  //事件
  var action = {
	batchDel: function(){
      var checkStatus = table.checkStatus('dict-table')
      ,checkData = checkStatus.data; //得到选中的数据
      var ids = [];
	  for(let i=0;i<checkData.length;i++){
		  ids[i] = checkData[i].id;
	  }
      if(checkData.length === 0){
        return layer.msg('请选择记录');
      }
      layer.confirm('确定删除吗？', function(index) {
    	  $.ajax({
    		  url: "dict/delete",
    		  type:'POST',
    		  dataType:'json',
    		  data:{ids: ids},
    		  success:function(ret){
    			  table.reload('dict-table');
    			  refreshNode();
    	          layer.msg('已删除');
    		  }
    	  })
          
        })
    }
    ,add: function(){
    	var selectedNodes = treeObj.getSelectedNodes();
    	layer.open({
    		type: 2,
    		title:'增加数据字典',
    		area:['700px','400px'],
    		content:  'rooter?url=system/dict/add-dict',
    		btn:['保存','关闭'],
    		yes:function(index,layero){
    			var dataForm = layer.getChildFrame('form', index);
    			var values = {};
    			dataForm.find(":input").each(function(i,v){
    				values[v.name] = v.value;
    			})
                axios.post("dict/add",values).then(res=>{
                  layer.close(index);
                  table.reload('dict-table');
                  refreshNode();
                })

    		},
    		success: function(layero, index){
    		   var dataForm = layer.getChildFrame('form', index);
    		   if(selectedNodes.length!=0){
    			   dataForm.find("input[name=parentId]").val(selectedNodes[0].id);
    		   }
    		}
    	});    
    }
    ,move: function(){
    	var selectedNodes = treeObj.getSelectedNodes();
    	if(selectedNodes.length==0){
    		return layer.msg("请选择要移动的字典",{icon:0});
    	}
    	layer.open({
    		type: 2,
    		title:'请选择移动的目标字典',
    		area:['400px','600px'],
    		content:  'rooter?url=system/dict/move-dict',
    		btn:['移动到该字典下','关闭'],
    		yes:function(index,layero){
    			var iframeWin = window[layero.find('iframe')[0]['name']];
    			var destNodes = iframeWin.treeObj.getSelectedNodes();
    			if(destNodes.length==0){
    				return layer.msg("请选择目标字典",{icon:0});
    			}
    			var values = {id:selectedNodes[0].id,parentId:destNodes[0].id};
    			$.ajax({
    				url: 'dict/move',
    				data: values,
    				type:'POST',
    				dataType:'JSON',
    				success:function(ret){
    					layer.close(index);
    					table.reload('navi-table');
    					var nodes = treeObj.getNodesByParam("id", values.parentId, null);
    					treeObj.moveNode(nodes[0],selectedNodes[0], "inner");
    					
    				}
    			})
    		},
    		success: function(layero, index){
    			layer.title("将【"+selectedNodes[0].name+"】移动到",index);
    		}
    	});    
    }
    ,refreshAll: function(){
      $("#name").val("");
      $("#code").val("");
      var selectedNodes = treeObj.getSelectedNodes();
      if(selectedNodes.length!=0){
        var whr = {parentId:selectedNodes[0].id,name:$("#name").val(),code:$("#code").val()};
        table.reload('dict-table',{
          loading:true,
          where: whr
          ,page: {
            curr: 1 //重新从第 1 页开始
          }
        });
      }
    	refreshNode();
    },
    queryBtn:function () {

      var selectedNodes = treeObj.getSelectedNodes();
      var whr ={};
      whr['name']=$("#name").val();
      whr['code']=$("#code").val();
      table.reload('dict-table',{
        loading:true,
        where: whr
        ,page: {
          curr: 1 //重新从第 1 页开始
        }
      });
    }
  };
  $('.layui-btn').each(function(i,obj){
	  $(this).on('click', function(){
		   var type = $(this).data('type');
		   action[type].call(this);
	  })
  });
});
</script>
</body>